<template>
    <div class="app-container">
        <div class="filter-container">
                <el-input style="width: 200px;" class="filter-item" placeholder="用户名称" v-model="listQuery.userName">
                </el-input>
                <el-input style="width: 200px;" class="filter-item" placeholder="邮件地址" v-model="listQuery.mailAddress">
                </el-input>
            <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter" >{{$t('table.search')}}</el-button>

            <el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" @click="restQuery">{{$t('table.reset')}}</el-button>

            <el-button v-has="'mailUser_add'" class="filter-item" @click="handleCreate" type="primary" icon="el-icon-plus" >添加邮件通知用户</el-button>
        </div>

        <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
                  style="width: 100%" >
            <el-table-column align="center" :label="$t('table.id')" width="65">
                <template slot-scope="scope">
                    <span>{{scope.$index+1}}</span>
                </template>
            </el-table-column>
                <el-table-column align="center" label="用户名称">
                    <template slot-scope="scope">
                        <span>{{scope.row.userName}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="邮件地址">
                    <template slot-scope="scope">
                        <span>{{scope.row.mailAddress}}</span>
                    </template>
                </el-table-column>
            <el-table-column align="center" :label="$t('table.actions')" width="360" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button v-has="'mailUser_delete'" size="mini" type="danger" @click="handleDelete(scope.row,'deleted')">移除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @current-change="handleCurrentChange" :current-page="page.page" :page-size="page.limit" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">

            <userInfoList ref="userDialog" @selectData="selectData" v-on:doSaveUsers="fetchList" @hideDialog="hideing"
             :dialogFormVisible="dialogFormVisible"></userInfoList>

            <!--<div slot="footer" class="dialog-footer" v-if="dialogStatus !== 'info'">-->

                <!--<el-button @click="dialogFormVisible = false">{{$t('table.cancel')}}</el-button>-->
                <!--<el-button type="primary" @click="createData">{{$t('table.confirm')}}</el-button>-->
            <!--</div>-->
            <div slot="footer" class="dialog-footer" v-if="dialogStatus !== 'info'" style="float: right;">
            </div>
        </el-dialog>

    </div>
</template>
 
<script>
    import { fetchList, infoMailAcceptUsers, updateMailAcceptUsers, deleteMailAcceptUsers } from '@/api/user/mailAcceptUsers'
    import waves from '@/directive/waves' // 水波纹指令
    import { parseTime } from '@/utils'
    import userInfoList from '@/views/user/userInfoList'
    export default {
      name: 'complexTable',
      directives: {
        waves
      },
      components: { userInfoList },
      data() {
        return {
          tableKey: 0,
          list: null,
          total: null,
          listLoading: true,
          checkboxData: '',
          page: {
            page: 1,
            limit: 20,
            sort: ''
          },
          listQuery: {
            userId: undefined,
            userName: undefined,
            mailAddress: undefined,
            status: undefined
          },
          dialogFormVisible: false,
          dialogStatus: '',
          textMap: {
            update: '修改',
            create: '新增',
            info: '详情'
          },
          temp: {
            userId: '',
            userName: '',
            mailAddress: '',
            status: ''
          },
          rules: {
            userId: [{ required: true, message: '用户ID不能为空', trigger: 'blur' }],
            userName: [{ required: true, message: '用户名称不能为空', trigger: 'blur' }],
            mailAddress: [{ required: true, message: '邮件地址不能为空', trigger: 'blur' }],
            status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
          },
          downloadLoading: false,
          selectIds: ''
        }
      },
      filters: {
      },
      created() {
        this.getList()
      },
      methods: {
        getList() {
          this.listLoading = true
          fetchList(this.listQuery).then(response => {
            if (response.success) {
              this.list = response.content.list
              this.total = response.content.total
              this.listLoading = false
            } else {
              this.$message({
                type: 'fail',
                message: response.message
              })
            }
          })
        },
        // 搜索按钮
        handleFilter() {
          this.listQuery.page = 1
          this.getList()
        },
        // 跳转页数
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.getList()
        },
        // 详情
        handleInfo(row, status) {
          infoMailAcceptUsers(row.id).then(response => {
            if (response.success) {
              this.temp = Object.assign({}, response.content) // copy obj
              this.dialogStatus = status
              this.dialogFormVisible = true
              this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
              })
            }
          })
        },
        resetTemp() {
          this.temp = {
            userId: '',
            userName: '',
            mailAddress: '',
            status: ''
          }
        },
        // 打开新增dialog
        handleCreate() {
          this.resetTemp()
          this.dialogStatus = 'create'
          this.dialogFormVisible = true
          this.$refs.userDialog.resetPage()
          this.$nextTick(() => {
          })
        },
        // 新增数据post
        // createData(row, status) {
        //     let params = {userIds:this.selectIds};
        //     console.log(params)
        //     doSaveMailUsers(params).then(response => {
        //         if (response.success) {
        //             this.$message({
        //                 type: 'success',
        //                 message: response.message
        //             });
        //             console.info("子组件发出通知");
        //             this.$emit("doSaveUsers");
        //             // this.list = response.content.list
        //             //
        //             // this.total = response.content.total
        //             // this.listLoading = false
        //         } else {
        //             this.$message({
        //                 type: 'fail',
        //                 message: response.message
        //             });
        //         }
        //     })
        // },
        // 更新页面
        handleUpdate(row) {
          infoMailAcceptUsers(row.id).then(response => {
            this.temp = Object.assign({}, response.content) // copy obj
            this.dialogStatus = 'update'
            this.dialogFormVisible = true
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          })
        },
        // 提交更新
        updateData() {
          this.$refs['dataForm'].validate((valid) => {
            if (valid) {
              const tempData = Object.assign({}, this.temp)
              updateMailAcceptUsers(tempData).then(response => {
                if (response.success) {
                  this.getList()
                  this.dialogFormVisible = false
                  this.$notify({
                    title: '成功',
                    message: '更新成功',
                    type: 'success',
                    duration: 2000
                  })
                }
              })
            }
          })
        },
        // 移除操作
        handleDelete(row) {
          this.$confirm('此操作将移除该用户邮件通知, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 调用移除接口
            var p = { id: row.id }
            deleteMailAcceptUsers(p).then(response => {
              if (response.success) {
                this.getList()
                this.$message({
                  type: 'success',
                  message: '移除成功!'
                })
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => {
            if (j === 'timestamp') {
              return parseTime(v[j])
            } else {
              return v[j]
            }
          }))
        },
        selectionChange(selects) {
          console.info(selects)
          this.selectIds = ''
          for (var select of selects) {
            this.selectIds += select.id
            this.selectIds += ','
          }
          this.selectIds = this.selectIds.substring(0, this.selectIds.length - 1)
          console.info(this.selectIds)
        },
        selectData(data) {
          data.forEach((v, i) => {
            this.temp = data.id
            this.temp = data.userName
            this.temp = data.userStatus
          })
          // 调用gitlist
        },
        hideing() {
          this.dialogFormVisible = false
        },
        fetchList() {
          this.getList()
          this.dialogFormVisible = false
        },
        restQuery() {
          this.listQuery.userName = ''
          this.listQuery.mailAddress = ''
          this.getList()
        }
        // searchEnterFun:function(e){
        //     var keyCode = window.event? e.keyCode:e.which;
        //      console.log('回车搜索',keyCode,e);
        //     if(keyCode == 13 && this.input){
        //         this.$router.push({path:'/Share?keywords='+this.input});
        //     }
        //
        // }
      }

    }
</script>
